<!-- 退货申请处理 -->
<template>
  <div class="returnGoods">
    <Crumbs />
    <section class="returnGoods_content">
      <section class="search">
        <div class="search_header">
          <div class="search_header_l">
            <el-icon><Search /></el-icon><span>筛选搜索</span>
          </div>
          <div class="search_header_r">
            <el-button>重置</el-button>
            <el-button type="primary">查询结果</el-button>
          </div>
        </div>
        <section class="search_content">
          <ul class="search_list">
            <li class="search_item">
              <span>输入搜索：</span>
              <el-input placeholder="服务单号" />
            </li>
            <li class="search_item">
              <span>处理状态：</span>
              <el-select class="m-2" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </li>
            <li class="search_item">
              <span>申请时间：</span>
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="请选择时间"
                  style="width: 100%"
                />
              </el-form-item>
            </li>
            <li class="search_item">
              <span>操作人员：</span>
              <el-input placeholder="全部" />
            </li>
            <li class="search_item">
              <span>处理时间 ：</span>
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="请选择时间"
                  style="width: 100%"
                />
              </el-form-item>
            </li>
          </ul>
        </section>
      </section>
      <DataList />
    </section>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
import Crumbs from '../../components/Common/Crumbs.vue';
import DataList from '../../components/Common/DataList.vue';
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
];
</script>
<style lang="less" scoped>
.returnGoods {
  .returnGoods_content {
    padding: 10px 20px;
    .search {
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      margin-top: 20px;
      .search_header {
        display: flex;
        justify-content: space-between;
      }
      .search_content {
        margin-top: 20px;
        .search_list {
          display: flex;
          flex-wrap: wrap;
          .search_item {
            width: 26%;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            span {
              width: 85px;
            }
            :deep(.el-input) {
              width: 210px;
            }
            :deep(.el-form-item) {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
